<template>
  <div class="car">
      
      <div class="mui-card" v-for="(item,index) in carlist" :key="item.id">
        <div class="mui-card-content">
          	<div class="mui-card-content-inner">
              <!-- 是否选中按钮 -->
              <mt-switch v-model="$store.getters.getCarSelected[item.id]"
                         @change="carSelected(item.id,$store.getters.getCarSelected[item.id])"></mt-switch>
              <img :src="item.thumb_path" alt="">
              <div class="info">
                <h3>{{item.title}}</h3>
                  <p class="body"> 
                    <span>￥{{item.sell_price}}</span> &nbsp;&nbsp;
                    <numbox class="num" :goodsId="item.id" :initnum="$store.getters.getCargoodsNum[item.id]"></numbox>&nbsp;&nbsp;
                    <a href="#" @click.prevent="remove(item.id,index)">删除</a>
                  </p>
              </div>
          	</div>        
        </div>      
      </div>

      <!-- 结算页面 -->
      <div class="mui-card">
        <div class="mui-card-content">
          	<div class="mui-card-content-inner bablance" >
              <div class="left">
                  <p>总计（不含运费）</p>
                  <p class="sell">
                      已勾选商品 <span>{{$store.getters.getCountAndPrice.count}}</span>件，
                      总价 <span>￥{{$store.getters.getCountAndPrice.price}}</span>
                  </p>
              </div>
               <mt-button type="danger">去结算</mt-button>
          	</div>        
        </div>      
      </div>

      {{$store.getters.getCarSelected}}

  </div>
</template>
<script>
import numbox from "../subcomment/car-numbox.vue";
export default {
  data() {
    return {
      carlist:[],//购物车列表数据
    };
  },
  components: {
    numbox
  },
  created(){
    this.getcarlist();
  },
  methods:{
    getcarlist(){
      // 因为此接口要求传递多个id值，因此要先对齐进行以逗号拼接处理
      // 从vuex中获取到数据
      // 还要先判断是否存在数据，如果不存在要进行处理，否则会报错
      var idArr = [];
      this.$store.state.car.forEach(item => {
        idArr.push(item.id);
      });
      if(idArr.length <= 0){
        return;
      }
      this.$http.get('api/goods/getshopcarlist/'+idArr.join(',')).then((res)=>{
        // console.log(res.body);
        if(res.body.status == 0){
          this.carlist = res.body.message
        }else{
          console.log('请求数据失败')
        }
      })
    },
    remove(id,index){
      // 点击按钮，根据index从carlist中删除
      this.carlist.splice(index,1);
      this.$store.commit('removeCarlist',id)
    },

    // 状态
    carSelected(id,selectedval){
      this.$store.commit('carSelectedUpdata',{id,selectedval})
    }
  }
};
</script>
<style lang="scss" scoped>
.car{
  background-color: #eee;
   overflow: hidden;
}
.mui-card-content-inner {
  padding: 5px;
  display: flex;
  justify-content: space-between;
   align-items: center;
  img{
    width: 60px;
    height: 60px;
    padding: 0 2px;
  }
  .info{
     display: flex;
     flex-direction: column;
     justify-content: space-between;
    h3{
      font-size: 14px;
    }
    .body{
       display: flex;
       justify-content: space-between;
          align-items: center;
       .num{
          height: 30px;
        }
        span{
          color: red;
          font-weight: bold;
        }
    }
    
  }
 
}
 .bablance{
   padding: 5px 10px;
   display: flex;
   align-items: center;
    .left{
      p{
        margin: 0px;
        padding: 5px 0px;
         span{
          color: red;
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
   
  }
 
</style>